<template>
  <div class="body">
    <div class="img">
      <img
        id="i1"
        src="https://img.axureshop.com/7a/4a/a8/7a4aa826e79b40d086fba67fb100e0f9/images/0%E7%99%BB%E9%99%86%E9%A1%B5/u3.png"
        alt=""
      >
      <img
        id="i2"
        src="https://img.axureshop.com/7a/4a/a8/7a4aa826e79b40d086fba67fb100e0f9/images/0%E7%99%BB%E9%99%86%E9%A1%B5/u25.png"
        alt=""
      >
      <img
        id="i3"
        src="https://img.axureshop.com/7a/4a/a8/7a4aa826e79b40d086fba67fb100e0f9/images/0%E7%99%BB%E9%99%86%E9%A1%B5/u5.png"
        alt=""
      >
      <img
        id="i4"
        src="https://img.axureshop.com/7a/4a/a8/7a4aa826e79b40d086fba67fb100e0f9/images/0%E7%99%BB%E9%99%86%E9%A1%B5/u4.png"
        alt=""
      >
    </div>
    <el-card class="loginbox">
      <div class="title">
        <img
          src="https://img.axureshop.com/7a/4a/a8/7a4aa826e79b40d086fba67fb100e0f9/images/0%E7%99%BB%E9%99%86%E9%A1%B5/u24.png"
          alt=""
        >
        <h2>人力资源管理后台系统</h2>
      </div>
      <el-form ref="loginForm" :model="loginForm" :rules="loginRules">
        <el-form-item prop="mobile">
          <el-input v-model="loginForm.mobile" placeholder="手机号">
            <template #prefix>
              <img
                src="https://img.axureshop.com/7a/4a/a8/7a4aa826e79b40d086fba67fb100e0f9/images/0%E7%99%BB%E9%99%86%E9%A1%B5/u13.png"
                alt=""
              >
            </template>
          </el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input v-model="loginForm.password" show-password placeholder="密码">
            <template #prefix>
              <img src="https://img.axureshop.com/7a/4a/a8/7a4aa826e79b40d086fba67fb100e0f9/images/0%E7%99%BB%E9%99%86%E9%A1%B5/u17.png" alt="">
            </template>
          </el-input>
        </el-form-item>
        <el-form-item prop="isCode">
          <el-input v-model.number="loginForm.isCode" placeholder="验证码">
            <template #prefix>
              <img src="https://img.axureshop.com/7a/4a/a8/7a4aa826e79b40d086fba67fb100e0f9/images/0%E7%99%BB%E9%99%86%E9%A1%B5/u21.png" alt="">
            </template>
            <template #append>
              <span>{{ code }}</span>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item prop="isChecked">
          <el-checkbox v-model="loginForm.isChecked" style=" height:30px">用户平台使用协议</el-checkbox>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="loginClick">登录</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 登录表单数据
      loginForm: {
        mobile: '',
        password: '',
        isCode: null,
        isChecked: false
      },
      code: 9625,
      // 表单校验规则
      loginRules: {
        mobile: [
          { required: true, message: '手机号不能为空', trigger: 'blur' },
          { pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '密码不能为空', trigger: 'blur' },
          { min: 6, max: 16, message: '密码需要6-16位', trigger: 'blur' }
        ],
        // 自定义校验 验证码和复选框规则
        isCode: [{
          validator: (rule, value, callback) => {
            value === this.code ? callback() : value === '' ? callback(new Error('验证码不能为空')) : callback(new Error('验证码不正确'))
          }, trigger: 'blur'
        }],
        isChecked: [{
          validator: (rule, value, callback) => {
            value ? callback() : callback(new Error('请勾选用户协议'))
          }
        }]
      }
    }
  },
  methods: {
    loginClick() {
      // 对表单整体做校验
      this.$refs.loginForm.validate(async(isOk) => {
        if (!isOk) return
        // alert('校验通过可以发送登录请求了')
        // 派发登录请求数据
        await this.$store.dispatch('user/loginAction', this.loginForm)

        // 登录成功后跳转到首页
        this.$router.push('/')
      })
    }
  }
}
</script>

<style scoped lang="scss">
  * {
    margin: 0;
    padding: 0;
  }
  // 页面布局
  .body {
    // 父级相对定位
    position: relative;
    background: linear-gradient(to bottom, #3fccfd, #996cfb);
    height: 100%;
    overflow: hidden;
  }
  // 左上圆
  #i1 {
    // 子级绝对定位
    position: absolute;
    left: 40px;
    top: 50px;
    opacity: 0.6;
  }
  // 左下圆
  #i2 {
    position: absolute;
    left: 310px;
    top: 140px;
  }
  // 右上圆
  #i3 {
    position: absolute;
    left: -280px;
    bottom: -240px;
  }
  // 中间图
  #i4 {
    position: absolute;
    right: 20px;
    top: -200px;
  }
  // 登录盒子
  .loginbox {
    position: absolute;
    right: 350px;
    top: 140px;
    width: 380px;
    height: 400px;
    .title {
      margin: 15px 0;
      display: flex;
      h2 {
        font-size: 28px;
        line-height: 42px;
        color: #438dee;
      }
  }
  }

  .el-input {
    width: 340px;
    margin-top: 18px;
    img {
      width: 20px;
      height: 20px;
      margin-top: 10px;
      margin-left: 5px;
    }
  }
  ::v-deep .el-input--prefix .el-input__inner {
    padding-left: 40px;
    background-color: #f9f9f9;

  }
    ::v-deep .el-input-group__append {
      width: 90px;
      text-align: center;
      font-size: 18px;
      font-weight: 700;
      color: #ea5a00;
    }
  .el-button {
    width: 340px;
    height: 44px;
    margin-top: 18px;
  }
  .el-checkbox {
    margin-top: 10px;
  }
  ::v-deep .el-input--suffix {
    .code {
      width: 80px;
      background-color: #c1c1c1;
    }
    span {
      color: #fff;
    }
  }
</style>
